<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3渐变</title>
    <link rel="stylesheet" href="public.css">
    <style>
        img {
            width: 20%;
            /* height: 200px; */
        }
        .border-box2 {
            margin: 10px;
    width: 200px;
    height: 200px;
    display: inline-block;
    text-align: center;
    padding-top: 30px;
    font-size: 10px;
    box-sizing: border-box;
    border: 2px solid black;
        }
    </style>
</head>

<body>
    <h1>CSS3渐变</h1>
    <a href="https://c.runoob.com/more/gradients/#LemonLime">渐变在线工具</a>
    <p>CSS3 定义了两种类型的渐变（gradients）：</p>
    <p>线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向</p>
    <p>径向渐变（Radial Gradients）- 由它们的中心定义</p>
    <h3>1、 线性渐变</h3>
    <p>background-image: linear-gradient(#e66465, #9198e5);</p>

    <div class="start-center">
        <!-- 默认从上到下 -->
        <div class="border-box" style="background-image: linear-gradient(red,green);">(red,green)</div>
        <div class="border-box"
            style="background-image: linear-gradient(to right,red, orange,yellow,green,skyblue,blue,purple);">(to
            right,red, orange,yellow,green,skyblue,blue,purple)</div>
        <div class="border-box"
            style="background-image: linear-gradient(to top,red, orange,yellow,green,skyblue,blue,purple);">(to top,red,
            orange,yellow,green,skyblue,blue,purple)</div>
        <div class="border-box"
            style="background-image: linear-gradient(to bottom right,red, orange,yellow,green,skyblue,blue,purple);">(to
            bottom right,red, orange,yellow,green,skyblue,blue,purple)</div>
        <div class="border-box"
            style="background-image: linear-gradient(to left bottom, orange,yellow,green,skyblue,blue,purple);">(to left
            bottom,red, orange,yellow,green,skyblue,blue,purple)</div>
        <div class="border-box" style="background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));">
            (透明度)</div>
        <div class="border-box"
            style="background-image: linear-gradient(to bottom right,red 40%, orange 50%,yellow 60%,green,skyblue,blue,purple);">
            规定从哪里开始渐变</div>
        <div class="border-box" style="background-image: repeating-linear-gradient(45deg,green,blue 20%);">
            重复的线性渐变
        </div>
        <div class="border-box" style="background-image: repeating-linear-gradient(45deg,orange 10%,skyblue 40%);">
            重复的线性渐变
        </div>


        <div class="start-center">
            <img src="./images/deg.jpg" title="角度">
            <!-- 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。 -->
            <div class="circle-box"
                style="background-image: linear-gradient(-40deg,red, orange,yellow,green,skyblue,blue,purple);">(-40deg)
            </div>
            <div class="circle-box"
                style="background-image: linear-gradient(40deg,red, orange,yellow,green,skyblue,blue,purple);">(40deg)
            </div>
            <div class="circle-box"
                style="background-image: linear-gradient(160deg,red, orange,yellow,green,skyblue,blue,purple);">(160deg)
            </div>
            <div class="circle-box"
                style="background-image: repeating-linear-gradient( orange,yellow,green,skyblue,purple 20%);">(160deg)
            </div>
        </div>

    </div>
    <h3>2、 径向渐变</h3>
    <p>background-image: radial-gradient(shape size at position, start-color, ..., last-color);</p>
    <p>shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。</p>
    <p>size 参数定义了渐变的大小。它可以是以下四个值：
        closest-side
        farthest-side
        closest-corner
        farthest-corner</p>
    <div class="start-center">
        <!-- 默认从里到外 -->
        <div class="border-box2" style="background-image: radial-gradient(red,green);">(red,green)</div>
        <div class="border-box2"
            style="background-image: radial-gradient(circle,red, orange,yellow,green,skyblue,blue,purple);">
            circle</div>
        <div class="border-box"
            style="background-image: radial-gradient(ellipse,red, orange,yellow,green,skyblue,blue,purple);">ellipse
        </div>
        <div class="border-box"
            style="background-image: radial-gradient(circle closest-side,red, orange,yellow,green,skyblue,blue,purple);">短边closest-side</div>
        <div class="border-box"
            style="background-image: radial-gradient(circle farthest-side, red, orange,yellow,green,skyblue,blue,purple);">长边farthest-side</div>
        <div class="border-box2" style="background-image: radial-gradient( closest-corner, red, orange,yellow,green,skyblue,blue,purple);">
            短对角closest-corner</div>
        <div class="border-box2"
            style="background-image: radial-gradient(farthest-corner,red, orange,yellow,green,skyblue,blue,purple);">
            长对角farthest-corner</div>
        <div class="circle-box"
            style="background-image: repeating-radial-gradient( orange,yellow,green,skyblue,purple 20%);">重复径向渐变
        </div>


    </div>

</body>

</html>